<template>
  <div >
    <el-date-picker style="width:260px;"
                    v-model="timeRange"
                    :type="this.rangetype"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    :start-placeholder="$t('开始时间')"
                    :end-placeholder="$t('结束时间')"
                    :disabled="disabled"
                    clearable
                    @change="setTime">
    </el-date-picker>
  </div>
</template>
<script>
  import api from '../../utils/api'
  import util from '../../utils/util'
  export default {
    name: 'rf-daterange',
    props: {
      rangetype: { //
        type: String,
        default: 'daterange'
      },
      begin_date: { //
        type: String
      },
      end_date: { //
        type: String
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        timeRange: [],
        beginDate: '',
        endDate: ''
      }
    },
    watch: {
      begin_date (newValue) {
        this.beginDate = newValue
        if(!newValue) {
          this.timeRange = []
        } else {
          this.timeRange = [this.beginDate, this.endDate]
        }
      },
      end_date (newValue) {
        this.endDate = newValue
        if(!newValue) {
          this.timeRange = []
        } else {
          this.timeRange = [this.beginDate, this.endDate]
        }
      }
    },
    mounted () {
    },
    methods: {
      setTime (dateRange) {
        if (dateRange && dateRange.length > 0) {
          if (this.rangetype === 'daterange') {
            this.beginDate = dateRange[0] + ' 00:00:00'
            this.endDate = dateRange[1] + ' 23:59:59'
          } else {
            this.beginDate = dateRange[0]
            this.endDate = dateRange[1]
          }
        } else {
          this.beginDate = ''
          this.endDate = ''
        }
        this.$emit('update:begin_date', this.beginDate)
        this.$emit('update:end_date', this.endDate)
        this.$emit('change', this.beginDate,this.endDate)
      }
    }
  }
</script>

